<template>
  <view 
    class="floating-navigation" 
    @touchstart="touchStart"
    @touchmove.stop.prevent="touchMove"
    @touchend="touchEnd"
    :style="{ left: left + 'px', top: top + 'px' }"
    @click="goToAITryOn">
    <text class="navigation-text">时空衣橱</text>
  </view>
</template>

<script>
import { checkLogin, toLogin } from '../../libs/login.js';

export default {
  name: 'FloatingNavigation',
  data() {
    return {
      left: 30, // 初始左边距
      top: 400, // 初始顶边距
      startX: 0, // 触摸开始X坐标
      startY: 0, // 触摸开始Y坐标
      windowWidth: 0, // 屏幕宽度
      windowHeight: 0, // 屏幕高度
      ballSize: 120, // 悬浮球尺寸(rpx)，与CSS中保持一致
      padding: 15, // 边缘间距(px)
      isDragging: false, // 是否正在拖动
    }
  },
  created() {
    // 获取屏幕尺寸
    const info = uni.getSystemInfoSync();
    this.windowWidth = info.windowWidth;
    this.windowHeight = info.windowHeight;
    
    // 从本地存储获取位置
    const savedPosition = uni.getStorageSync('floatingBallPosition');
    if (savedPosition) {
      this.left = savedPosition.left;
      this.top = savedPosition.top;
    } else {
      // 初始位置设置在右下角
      const ballSizePx = uni.upx2px(this.ballSize);
      this.left = this.windowWidth - ballSizePx - this.padding;
      this.top = this.windowHeight * 0.7;
    }
  },
  methods: {
    goToAITryOn() {
      // 如果正在拖动，不触发点击事件
      if (this.isDragging) {
        this.isDragging = false;
        return;
      }
      
      // 检查用户是否已登录
      if (!checkLogin()) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        });
        toLogin();
        return;
      }
      
      uni.navigateTo({
        url: '/pages/AI_try_on/new_tryai',
        fail: () => {
          uni.showToast({
            title: '跳转失败，请重试',
            icon: 'none'
          });
        }
      });
    },
    touchStart(e) {
      // 阻止默认行为
      e.stopPropagation();
      e.preventDefault();
      
      this.isDragging = false;
      this.startX = e.touches[0].clientX;
      this.startY = e.touches[0].clientY;
    },
    touchMove(e) {
      // touchmove 已经在模板中使用了 stop 和 prevent
      
      this.isDragging = true;
      const ballSizePx = uni.upx2px(this.ballSize);
      const moveX = e.touches[0].clientX - this.startX;
      const moveY = e.touches[0].clientY - this.startY;
      
      // 更新位置
      let newLeft = this.left + moveX;
      let newTop = this.top + moveY;
      
      // 限制不超出屏幕边界
      if (newLeft < this.padding) newLeft = this.padding;
      if (newLeft > this.windowWidth - ballSizePx - this.padding) {
        newLeft = this.windowWidth - ballSizePx - this.padding;
      }
      if (newTop < this.padding) newTop = this.padding;
      if (newTop > this.windowHeight - ballSizePx - this.padding) {
        newTop = this.windowHeight - ballSizePx - this.padding;
      }
      
      this.left = newLeft;
      this.top = newTop;
      
      // 更新起始点
      this.startX = e.touches[0].clientX;
      this.startY = e.touches[0].clientY;
    },
    touchEnd(e) {
      // 阻止默认行为
      e.stopPropagation();
      
      const ballSizePx = uni.upx2px(this.ballSize);
      
      // 自动回贴屏幕边缘
      if (this.left < this.windowWidth / 2) {
        // 靠左
        this.left = this.padding;
      } else {
        // 靠右
        this.left = this.windowWidth - ballSizePx - this.padding;
      }
      
      // 保存位置到本地存储
      uni.setStorageSync('floatingBallPosition', {
        left: this.left,
        top: this.top
      });
      
      // 设置一个短暂的延迟，防止拖动后立即触发点击事件
      setTimeout(() => {
        this.isDragging = false;
      }, 50);
    }
  }
}
</script>

<style scoped>
.floating-navigation {
  position: fixed;
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  background: linear-gradient(135deg, #ff448f, #ff67ad);
  box-shadow: 0 6rpx 16rpx rgba(255, 68, 143, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  /* 添加以下属性防止拖动时触发其他事件 */
  touch-action: none;
}

.floating-navigation:active {
  transform: scale(0.95);
  box-shadow: 0 4rpx 10rpx rgba(255, 68, 143, 0.2);
  opacity: 1;
}

.navigation-text {
  color: #ffffff;
  font-size: 28rpx;
  font-weight: bold;
  /* 防止文本被选中 */
  user-select: none;
}
</style> 